<template>
  <!--粘棒记录-->
  <div class="app-container">
    <div class="highchartBox">
      <el-form class="jc_search_wrap" v-model="searchList_date">
        <label>开始时间</label>
        <!--<el-input type="date" v-model="searchList_date.startDate"></el-input>-->
        <el-date-picker
          v-model="startDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
        <label>结束时间</label>
        <!--<el-input type="date" v-model="searchList_date.endDate"></el-input>-->
        <el-date-picker
          v-model="endDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
        <el-button @click="searchRow_date"><i class="el-icon-search"></i>查询</el-button>
      </el-form>
      <highcharts :options="options01" ref="highCharts01"  class="highChart01" style="width:100%" :style="{height: tableHeight+ 'px'}"></highcharts>
    </div>
    <div class="highchartBox">
      <el-form class="jc_search_wrap" v-model="searchList_device">
        <label>选择时间</label>
        <!-- <el-input type="date" v-model="searchList_device.oneDay"></el-input> -->
        <el-date-picker
          v-model="oneDay"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>

        <el-button @click="chooseDevice">选择设备</el-button>
        <el-button @click="searchRow_device"><i class="el-icon-search"></i>查询</el-button>
      </el-form>
      <highcharts :options="options02" ref="highCharts02"  class="highChart02" style="width:100%" :style="{height: tableHeight+ 'px'}"></highcharts>
    </div>
    <el-dialog title="选择设备" :visible.sync="devices_visible" class="jc_dialog_wrap">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange(checkAll)">全选</el-checkbox>
      <el-checkbox-group v-model="deviceNos">
          <div class="deviceBox">
            <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=0 &&index<10"></el-checkbox>
          </div>
          <div class="deviceBox">
            <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=10 &&index<20"></el-checkbox>
          </div>
          <div class="deviceBox">
            <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=20 &&index<30"></el-checkbox>
          </div>
          <div class="deviceBox">
            <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=30 &&index<40"></el-checkbox>
          </div>
        <div class="deviceBox">
          <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=40 &&index<50"></el-checkbox>
        </div>
        <div class="deviceBox">
          <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=50 &&index<60"></el-checkbox>
        </div>
        <div class="deviceBox">
          <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=60 &&index<70"></el-checkbox>
        </div>
        <div class="deviceBox">
          <el-checkbox v-for="(item,index) in devices" :label="item" :key="item" v-if="index>=70 &&index<80"></el-checkbox>
        </div>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="devices_visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import * as LinecutOutput from "../../../api/report/linecutOutput";
  var moment = require('moment');
  const options01 = {
    credits:{
      enabled: false // 禁用版权信息
    },
    chart: {
      type: 'column',
    },
    title: {
      text: '线切日总产量统计'
    },
    subtitle: {
      text: null
    },
    xAxis: {
      categories: [
       /* '0726','0727','0728','0729','0730'*/
      ],
      lineWidth: 1,
      lineColor: '#000',
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
    },
    yAxis: {
      title: {
        align: 'high',
        offset: 0,
        text: '切割刀数',
        rotation: 0,
        x: 100,
        y: 20,
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
      lineWidth: 1,
      lineColor: '#000',
      gridLineWidth: 0,
      endOnTick: false,
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      }
    },
    tooltip: {
      // head + 每个 point + footer 拼接成完整的 table
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">切割刀数: </td>' +
      '<td style="padding:0"><b>{point.y:f} </b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },
    plotOptions: {
      column: {
        borderWidth: 0
      },
      series: {
        colorByPoint: false
      }
    },
    legend: {
      enabled: false
    },
    series: [/*{
     data: [49, 71, 106, 129, 144]
     }*/]
  };
  const options02 = {
    credits:{
      enabled: false // 禁用版权信息
    },
    chart: {
      type: 'column',
    },
    title: {
      text: '线切产量监控--设备'
    },
    subtitle: {
      text: null
    },
    xAxis: {
      categories: [
        /*'0726','0727','0728','0729','0730'*/
      ],
      lineWidth: 1,
      lineColor: '#000',
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
    },
    yAxis: {
      title: {
        align: 'high',
        offset: 0,
        text: '切割刀数',
        rotation: 0,
        x: 100,
        y: 20,
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
      lineWidth: 1,
      lineColor: '#000',
      gridLineWidth: 0,
      endOnTick: false,
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      }
    },
    tooltip: {
      // head + 每个 point + footer 拼接成完整的 table
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">切割刀数: </td>' +
      '<td style="padding:0"><b>{point.y:f} </b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },
    plotOptions: {
      column: {
        borderWidth: 0
      },
      series: {
        colorByPoint: false
      }
    },
    legend: {
      enabled: false
    },
    series: [/*{
      data: [49, 71, 106, 129, 144]
    }*/]
  };

  export default {
    components: {
    },
    data() {
      return {
        options01: options01,
        searchList_date: {startDate: '',endDate: ''},
        options02: options02,
        searchList_device: {oneDay: '',deviceNos: ''},
        deviceNos: [],
        devices: [],
        devices_visible: false,
        isIndeterminate: true,
        checkAll: false,
        startDate: '',
        endDate: '',
        oneDay: '',
      }

    },
    created() {
      /*初始化设备列表*/
      for(var j = 1;j <= 4;j++) {
        for (var i = 1; i <= 10; i++) {
          if (i < 10) {
            this.devices.push('A' + j + '-0' + i);
          } else {
            this.devices.push('A' + j + '-' + i);
          }
        }
      }
      for(var j = 1;j <= 4;j++) {
        for(var i=1;i<=10;i++) {
          if(i<10) {
            this.devices.push('B'+j+'-0'+ i);
          }else {
            this.devices.push('B'+j+'-'+ i);
          }
        }
      }
      /*初始化时间*/
      this.startDate = moment.utc(moment().subtract(6, 'days').format('YYYY-MM-DD 00:30:00')).format();
      this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchRow_date();
      /*初始化时间*/
      this.oneDay =moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchList_device.deviceNos = this.devices[0];
      this.searchRow_device();
    },
    methods: {
      fetchData_date() {
        LinecutOutput.getList_date(this.searchList_date).then(data => {
          if(this.$refs.highCharts01.chart.series.length > 0) {
            this.$refs.highCharts01.chart.series[0].remove(true);
          }
          var obj = {
            data: [],
            maxPointWidth: 50
          }
          var categorys = [];
          for(var i in data) {
            categorys.push(data[i].monthDay);
            obj.data.push(data[i].incisionNum);
          }

          this.$refs.highCharts01.chart.update({
            xAxis: {
              categories: categorys
            }
          })
          this.$refs.highCharts01.chart.addSeries(obj, true);
        });
      },
      fetchData_device() {
        this.searchList_device.oneDay = moment(this.searchList_device.oneDay).format('YYYY-MM-DD HH:mm:ss');
        LinecutOutput.getList_device(this.searchList_device).then(data => {
          if(this.$refs.highCharts02.chart.series.length > 0) {
            this.$refs.highCharts02.chart.series[0].remove(true);
          }
          var obj = {
            data: [],
            maxPointWidth: 50
          }
          var categorys = [];
          for(var i in data) {
            categorys.push(data[i].machineNo);
            obj.data.push(data[i].incisionNum);
          }

          this.$refs.highCharts02.chart.update({
            xAxis: {
              categories: categorys
            },
            subtitle: {
                text: this.searchList_device.oneDay
            }
          })
          this.$refs.highCharts02.chart.addSeries(obj, true);
        })
      },
      searchRow_date() {
        if( !this.startDate == ''){
          this.searchList_date.startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList_date.startDate = ''
        }
        if(!this.endDate == ''){
          this.searchList_date.endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList_date.endDate = ''
        }
        this.fetchData_date()
      },
      searchRow_device() {
        if( !this.oneDay == ''){
          this.searchList_device.oneDay = moment(this.oneDay).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList_device.oneDay = ''
        }
        this.fetchData_device()
      },
      chooseDevice() {
        this.devices_visible = true;
      },
      submit() {
        this.searchList_device.deviceNos = this.deviceNos.join(',');
        this.devices_visible = false;
      },
      handleCheckAllChange(val) {
        this.deviceNos = val ? this.devices : [];
        this.isIndeterminate = false;
      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      }
    }
  }
</script>
<style>
  .highchartBox {
    float: left;
    width: 50%;
  }
  .deviceBox {
    float: left;
    width: 100px;
  }
  .el-checkbox-group:after {
    content: '';
    display: block;
    clear: both;
  }
  .el-dialog--small {
    width: 900px;
  }
  .jc_search_wrap .el-date-editor {
    width: 180px;
  }
</style>
